import React, { Component } from 'react';

// 导入组件样式
import './index.css'
// 导入组件
import List from './list'
class Index extends Component {
  // js逻辑
  // 定义响应数据
  state = {
    // 评论人
    name: '',
    // 评论内容
    content: '',
    // 评论列表
    list: [
      { id: 0, name: '王钢蛋', content: '你好我叫刚到，来自蒙塔基' },
      { id: 1, name: '赵铁锤', content: '你好我叫铁锤，我特别硬' }

    ]
  }

  // 批量处理多个表单元素双向绑定
  hInput = (e) => {
    // console.log(e.target.name, e.target.value)
    this.setState({
      [e.target.name]: e.target.value
    })
  }
  // 发表评论
  pub = () => {
    // 湖获取评论数据
    const { name, content, list } = this.state
    // console.log(name,content)
    // 边界判断
    if (!name || !content) {
      return alert('不能有空的哦')
    }
    this.setState({
      list: [{ id: list.length, name, content }, ...list],
      // 清空输入框
      name: '',
      content: ''
    })

  }
  render() {
    return (
      <div className="box">
        <h1>评论</h1>
        {/* 发表评论 */}
        <div className="pub">
          <p><input name="name" value={this.state.name} onChange={this.hInput} type="text" /></p>
          <p><textarea name="content" value={this.state.content} onChange={this.hInput} /></p>
          <p><button onClick={this.pub} className="btn">发表评论</button></p>
        </div>
        {/* 评论列表 */}

        <hr className="line" />
        {/* 评论列表组件 */}
        <List list={this.state.list} />
      </div>
    );
  }
}

export default Index;